<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link href="../../css/base.css" rel="stylesheet">
    <link href="../../css/element.css" rel="stylesheet">
</head>
<body style="background:url('../../images/bg.jpg') no-repeat; background-size: cover;">
<div id="wrapper">
    <div style="width: 500px; margin: 150px auto; background-color:rgba(100,149,237,0.5); border-radius: 10px">
        <div style="width: 100%; height: 100px; font-size: 30px;line-height: 100px; text-align: center; color: darkblue">
            欢迎登录后台管理系统
        </div>
        <div style="margin-top: 25px; width: 100%; height: 320px;">
            <div style="width: 60%; margin: 0 auto">
                <input placeholder="请输入账号" style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 100%"
                       type="text"
                       v-model="user.username">
                <input placeholder="请输入密码" style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 100%; margin-top: 25px"
                       type="password"
                       v-model="user.password">
                <div style="margin-top: 25px; line-height: 40px">
                    <input placeholder="请输入验证码" style="border: 1px solid #ccc; padding: 10px; width: 65%; " type="text"
                           v-model="user.code">
                    <div id="picyzm" style="display: inline-block; height: 35px; vertical-align: middle;"></div>
                </div>

                <button @click="login"
                        style="height: 40px; padding: 10px; width: 100%; margin-top: 25px; background-color: steelblue; color: white">
                    登录
                </button>
                <a href="register.html"
                   style="width: 100%; text-align: right; display: inline-block; margin-top: 25px; color: darkblue">还没账号？去注册</a>
            </div>

        </div>
    </div>
</div>

<script src="../../js/jquery.min.js"></script>
<script src="../../js/vue.min.js"></script>
<script src="../../js/element.js"></script>
<script src="../../js/gVerify.js"></script>

<script>
    //初始化验证码
    let verifyCode;

    new Vue({
        el: "#wrapper",
        data: {
            user: {}
        },
        mounted() {
            verifyCode = new GVerify({
                id: "picyzm",
                type: "blend"
            });
        },
        methods: {
            login() {
                if (!this.user.username) {
                    this.$message({
                        message: "请输入用户名",
                        type: "error"
                    });
                    return;
                }
                // if (!this.user.password) {
                //     this.$message({
                //         message: "请输入密码",
                //         type: "error"
                //     });
                //     return;
                // }
                // if (!this.user.code) {
                //     this.$message({
                //         message: "请输入验证码",
                //         type: "error"
                //     });
                //     return;
                // }
                // let res = verifyCode.validate(this.user.code);
                // if (!res) {
                //     this.$message({
                //         message: "验证码错误",
                //         type: "error"
                //     });
                //     return;
                // }
                $.ajax({
                    url: "/usermessage/login",
                    type: "Get",
                    contentType: "application/json",
                    data: {
                        id: 1
                    }
                }).then(res => {
                    if (res.code === '200') {
                        this.$message({
                            message: "登录成功",
                            type: "success"
                        });
                        sessionStorage.setItem("user", JSON.stringify(res.data));
                        setTimeout(() => {
                            location.href = "/page/end/index.html"
                        }, 1000)
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        })
                    }
                })
            }
        }
    })

</script>
</body>
</html>
